<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-dialog :visible.sync="show" title="设置代理IP服务" :close-on-click-modal="false" :close-on-press-escape="false"
        :show-close="true" :append-to-body="true" :before-close="() => { $emit('cancle') }" width="600px"
        v-loading="loading">

        <el-form label-position="left" label-width="100px">
            <el-form-item label="服务提供商">
                <el-radio-group v-model="proxyId">
                    <el-radio v-for="(proxy, index) in proxys" :key="index" :label="proxy.id">{{ proxy.provider
                        }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <div v-if="proxyData.provider == '快代理'">
                <el-form-item label="API地址">
                    <el-input v-model="proxyData.api_url">
                        <i v-if="testStatus" class="el-icon-check el-input__icon success" slot="suffix">
                        </i>
                    </el-input>
                </el-form-item>
                <el-form-item label="请求方式">
                    <el-radio-group v-model="proxyData.api_method">
                        <el-radio label="GET">GET</el-radio>
                        <el-radio label="POST">POST</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="proxyData.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="proxyData.password" show-password></el-input>
                </el-form-item>
            </div>
            <el-form-item label="代理服务器" v-if="proxyData.provider == '手动填写'">
                <el-input type="textarea" :rows="9" v-model="proxyData.proxy_server"></el-input>
            </el-form-item>
        </el-form>

        <el-alert v-for="item, i in errorMsg" :key="i" :title="item" type="error">
        </el-alert>
        <el-alert title="测试通过" type="success" v-if="testStatus">
        </el-alert>

        <div slot="footer" class="footer">
            <el-button @click="() => { $emit('cancle') }" size="small" icon="el-icon-close">取消</el-button>
            <el-button @click="testHandle" size="small" icon="el-icon-refresh">测试</el-button>
            <el-button @click="submitHandle" type="primary" size="small" icon="el-icon-check">保存</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getProxyConfig, updateProxyConfig, testProxyConfig, } from "@/api/proxy-config";
export default {
    name: 'proxyConfig',
    data() {
        return {
            proxyId: '',
            proxys: [],
            proxyData: {
                id: '',
                provider: '',
                api_url: '',
                api_method: '',
                username: '',
                password: '',
                proxy_server: '',
            },
            loading: false,
            testStatus: false,
            errorMsg: [],
        }
    },
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        proxyId: function (val) {
            if (val) {
                this.proxyData = this.proxys.find(item => item.id == val);
            }
        },
        proxyData: {
            handler(val) {
                this.testStatus = false;
            },
            deep: true
        }
    },
    methods: {
        loadData() {
            this.loading = true;
            getProxyConfig().then(resp => {
                this.loading = false;
                if (resp.code != 0) {
                    return false;
                }
                this.proxys = resp.data;
                this.proxyData = this.proxys.find(item => item.enable);
                this.proxyId = this.proxyData.id;
            })
        },
        submitHandle: function () {
            var data = this.proxyData;
            if (!this.testStatus) {
                this.$message.warning("测试代理配置通过后才能保存");
                return false;
            }
            this.loading = true;
            updateProxyConfig(data).then(resp => {
                this.loading = false;
                if (resp.code != 0) {
                    return false;
                }
                this.$message.success("保存成功");
                this.$emit("success");
            })
        },
        testHandle() {
            var data = this.proxyData;
            this.errorMsg = []
            this.loading = true;
            testProxyConfig(data).then(resp => {
                this.loading = false;
                if (resp.code != 0) {
                    this.testStatus = false
                    if (resp.data) {
                        this.errorMsg = resp.data
                    } else {
                        this.errorMsg = [resp.message]
                    }

                    return false;
                }
                this.$message.success('测试成功');
                this.testStatus = true
            })
        },
    },
    mounted: function () {
        this.loadData();
    }

}
</script>

<style scoped>
.success {
    color: #409eff;
}
</style>